import { Button, message, Select } from 'antd';
import React from 'react';
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormDependency,
} from '@ant-design/pro-form';
import dayjs from 'dayjs';
import { PlusOutlined } from '@ant-design/icons';
import { request } from 'umi';
import { useEffect, useState } from 'react';
import { values } from 'lodash';
type ClassesType = {
  id: number;
  className: string;
  classYear: string;
  deptName: string;
  professionalName: string;
  createTime: string;
  updateTime: string;
  classStatu: number;
};

type optionsType = {
  value: string | number;
  label: string;
};

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default (props) => {
  const [prenode, SetPreNode] = useState<any[]>();
  const [classInfo, SetClassInfo] = useState({});
  useEffect(() => {
    async function getNodeData() {
      const data = await request('http://192.168.0.108:8080/professional/getProfessionalByDeptId');

      async function getClassesInfo() {
        const result = await request('http://192.168.0.108:8080/classes/getClassesById', {
          params: {
            id: props.currentRow.id,
          },
        });

        SetClassInfo(result.data);
      }
      getClassesInfo();

      SetPreNode(data.data);
    }

    getNodeData();
  }, []);

  const changeNode = (id: number) => {
    const temp = prenode;

    const data = temp
      ?.filter((item) => item.deptId === id)
      .map((item) => {
        return {
          label: item.professionalName,
          value: item.id,
        };
      });

    return data;
  };

  return (
    <ModalForm<{
      name: string;
      company: string;
    }>
      title="修改班级信息"
      trigger={<a>修改</a>}
      autoFocusFirstInput
      modalProps={{
        onCancel: () => console.log('run'),
      }}
      onFinish={async (values) => {
        const result = await request('http://192.168.0.108:8080/classes/insertOrUpdateClasses', {
          method: 'POST',
          data: {
            ...values,
            id: props.currentRow.id,
          },
        });
        console.log(result);

        if (result.success) {
          message.success('添加成功');
          props.reloadPage();
          return true;
        } else {
          message.success('添加失败');
          return true;
        }
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="md"
          name="className"
          initialValue={classInfo?.className}
          label="班级成名"
          placeholder="请输入班级名称"
          rules={[
            {
              required: true,
              message: '请输入班级名称',
            },
          ]}
        />

        <ProFormSelect
          width="sm"
          name="classYear"
          label="年级"
          initialValue={classInfo?.classYear}
          request={async () => {
            const { data } = await request('http://192.168.0.108:8080/classes/getEarlyYear', {});

            let year = dayjs().year();

            const list: any[] = [];

            while (year - 2000 - data >= 0) {
              list.push({
                label: String(year - 2000) + '级',
                value: year - 2000,
              });
              year = year - 1;
            }

            return list;
          }}
          placeholder="请选择年级"
          rules={[
            {
              required: true,
              message: '请选择年级',
            },
          ]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          initialValue={classInfo?.deptId}
          onMetaChange={(item) => {
            console.log(item);
          }}
          request={async () => {
            const deptData = await request('http://192.168.0.108:8080/dept/getAllDept', {});
            const list: any[] = [];
            deptData.data.map((item: any) => {
              list.push({
                label: item.deptName,
                value: item.id,
              });
            });

            return list;
          }}
          width="sm"
          name="deptName"
          rules={[
            {
              required: true,
              message: '请选择系部',
            },
          ]}
          label="系别"
          placeholder="请选择系部"
        />
        <ProFormDependency name={['deptName']}>
          {({ deptName }) => {
            const data = changeNode(deptName);

            return (
              <ProFormSelect
                options={data}
                debounceTime={1000}
                initialValue={classInfo?.professionalId}
                width="sm"
                rules={[
                  {
                    required: true,
                    message: '请选择专业',
                  },
                ]}
                name="professionalName"
                label="专业"
                placeholder="请选择专业"
              />
            );
          }}
        </ProFormDependency>
        <ProFormSelect
          width="sm"
          name="classStatu"
          label="状态"
          initialValue={classInfo?.classStatu}
          request={async () => {
            const list: any[] = [];

            list.push({
              label: '在校',
              value: 1,
            });
            list.push({
              label: '已毕业',
              value: 2,
            });
            list.push({
              label: '解决中',
              value: 3,
            });
            return list;
          }}
          placeholder="请选择状态"
          rules={[
            {
              required: true,
              message: '请选择状态',
            },
          ]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect disabled label="添加学生" tooltip="请在班级详情页添加学生信息" />
      </ProForm.Group>
    </ModalForm>
  );
};
